"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Package, ClipboardList } from 'lucide-react'

const tabItems = [
  {
    href: "/merchant",
    icon: Home,
    label: "首页"
  },
  {
    href: "/merchant/products",
    icon: Package,
    label: "商品管理"
  },
  {
    href: "/merchant/orders",
    icon: ClipboardList,
    label: "订单管理"
  }
]

export function MerchantTabBar() {
  const pathname = usePathname()

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t">
      <nav className="flex justify-around">
        {tabItems.map((item) => {
          const isActive = pathname === item.href
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex flex-col items-center gap-1 p-2 transition-colors ${
                isActive 
                  ? "text-amber-500" 
                  : "text-gray-500 hover:text-amber-500"
              }`}
            >
              <item.icon className="h-6 w-6" />
              <span className="text-xs">{item.label}</span>
            </Link>
          )
        })}
      </nav>
    </div>
  )
}

